<template>
	<view>
		<uv-navbar
			:leftIconColor="navstyle.txtColor"
			:titleStyle="titleStyle"
			:title="navstyle.title"
			:leftIcon="navstyle.leftIcon"
			:bgColor="navstyle.bgColor"
			:fixed="false" 
			@leftClick="leftClick"
			:safeAreaInsetTop="false">
		</uv-navbar>
		<view class="goods">
			<image class="goods-img" :src="rushInfo.goodsimage" mode=""></image>
			<view class="goods-info">
				<text class="jiage">￥{{rushInfo.goodsPrice}}</text>
				<text class="guidhu">归属人：{{rushInfo.username}}</text>
			</view>
		</view>
		<view class="goods-name">{{rushInfo.goodsName}}</view>
		<view class="goods-xiangqing">
			<view  class="xiangqing-name">商品详情</view>
		</view>
		<view class="content">
			<view class="html-content" v-html="rushInfo.goodsContent">
				
			</view>
		</view>
		<view v-if="!buyFlag" class="daojishi">
			倒计时{{countdownTime}}
		</view>
		<view v-if="buyFlag" @click="createClick" class="goumai">立即购买</view>
		
	</view>
	
</template>

<script>
	import {memberInfo} from '@/api/user.js';
	import {fetchrushDetail,createOrderRush,fetchRushIndex} from '@/api/rush.js';
	export default{
		data(){
			return{
				navstyle: {
					title: "商品详情",
					txtColor: "#333333",
					bgColor: "#FFFFFF",
					leftIcon: "arrow-left"
				},
				titleStyle: {
					fontWeight: 700
				},
				rushInfo:{},
				id:null,
				isVip:"",
				timer:null,
				countdownTime:"21:20:00",
				buyFlag:false,
			}
		},
		onLoad(options) {
			this.id = options.id;
			fetchrushDetail(this.id).then(response => {
				console.log(response,4444)
				this.rushInfo = response.data;
				this.countdownTime=this.rushInfo.starttime;
				this.isVip = this.rushInfo.isVip;
				this.startCountdown();
			});
			// fetchRushIndex().then(Response=>{
			// 	this.countdownTime=Response.data.starttime;
				
			// })
			// memberInfo().then(response => {
			// 	this.isVip = response.data.isVip;
			// 	console.log(this.isVip)
			// });
			
		},
		beforeDestroy() {
			this.stopCountdown(); // 在页面销毁前清除定时器
		},
		methods:{
			leftClick() {
				uni.reLaunch({
				  url: '/pages/rush/list' // 替换成上一页的路径
				});
			},
			startCountdown() {
			    // 设定倒计时结束的时间（例如：21:00:00）
			    const endTime = new Date();
			    const timeParts = this.countdownTime.split(':').map(Number);
			    endTime.setHours(timeParts[0], timeParts[1], timeParts[2], 0); // 根据this.countdownTime设置结束时间
			
			    // 获取当前时间
			    const now = new Date();
			
			    // 如果当前时间已经超过结束时间，则直接购买
			    if (now >= endTime) {
			        this.stopCountdown();
			        this.countdownTime = '00小时00分00秒';
			        this.buyFlag = true;
			        return;
			    }
			
			    // 如果用户是VIP，则提前一分钟开始倒计时
			    if (this.isVip === 1) {
			        endTime.setMinutes(endTime.getMinutes() - 1);
			        if (endTime < now) {
			            // 如果提前一分钟后时间小于当前时间，则直接购买
			            this.stopCountdown();
			            this.countdownTime = '00小时00分00秒';
			            this.buyFlag = true;
			            return;
			        }
			    }
			
			    // 计算剩余时间
			    const diffTime = endTime - now;
			    const totalSeconds = Math.floor((diffTime / 1000) % 60);
			    const totalMinutes = Math.floor((diffTime / (1000 * 60)) % 60);
			    const totalHours = Math.floor((diffTime / (1000 * 60 * 60)) % 24);
			
			    // 更新倒计时时间
			    this.countdownTime = `${totalHours.toString().padStart(2, '0')}小时${totalMinutes.toString().padStart(2, '0')}分${totalSeconds.toString().padStart(2, '0')}秒`;
			
			    // 启动倒计时
			    this.timer = setInterval(() => {
			        now.setSeconds(now.getSeconds() + 1); // 注意：这里仅用于演示目的，实际中不需要更新now
			
			        // 重新计算剩余时间并更新倒计时时间（这里为了简化，只更新了分钟和秒）
			        const newDiffTime = endTime - now;
			        const newTotalMinutes = Math.floor((newDiffTime / (1000 * 60)) % 60);
			        const newTotalSeconds = Math.floor((newDiffTime / 1000) % 60);
			
			        // 更新倒计时时间
			        this.countdownTime = `${totalHours.toString().padStart(2, '0')}小时${newTotalMinutes.toString().padStart(2, '0')}分${newTotalSeconds.toString().padStart(2, '0')}秒`;
			
			        // 检查是否达到结束时间
			        if (newDiffTime <= 0) {
			            this.stopCountdown();
			            this.countdownTime = '00小时00分00秒';
			            this.buyFlag = true;
			        }
			    }, 1000);
			},
			
			stopCountdown() {
			    if (this.timer) {
			        clearInterval(this.timer);
			        this.timer = null;
			    }
			},
			createClick(){
				createOrderRush(this.id).then(response => {
					if(response.code == 1){
						uni.showToast({
							title: response.msg,
							duration: 1500
						});
						setTimeout(()=>{
							uni.reLaunch({
							  url: '/pages/rush/list' // 替换成上一页的路径
							});
												
						},2000)
						

					}else{
						uni.showToast({
							title: response.msg,
							duration: 2000
						});
					}
				
				});
			}
		}
	}
</script>

<style>
	.goods {
	    width: 100%;
	    height: 300px;
	    position: relative;
	}
	.goods .goods-img {
	    width: 100%;
	    height: 260px;
	}
	.goods-info {
	    width: 95%;
	    height: 40px;
	    line-height: 40px;
	    background-color: #d76f6c;
	    padding: 0 10px;
	    position: absolute;
	    left: 0;
	    bottom: 0;
	}
	.goods-info text {
	    color: #fff;
	    font-size: 14px;
	}
	.goods-info .guidhu {
	    float: right;
	}
	.goods-name {
	    width: 100%;
	    height: 50px;
	    line-height: 50px;
	    font-size: 16px;
	    font-weight: 700;
	    padding: 0 10px;
	}
	.goods-xiangqing{
	    width: 100%;
	    height: 80px;
	    padding: 20px 0;
	}
	.goods-xiangqing .xiangqing-name{
	    width: 57px;
	    height: 40px;
	    line-height: 40px;
	    font-size: 14px;
	    text-align: center;
	    color: #999;
	    margin: 0 auto;
	    position: relative;
	}
	.goods-xiangqing .xiangqing-name::before {
	    display: block;
	    content: "";
	    width: 100px;
	    height: 1px;
	    background-color: #efefef;
	    position: absolute;
	    left: -110px;
	    top: 0;
	    bottom: 0;
	    margin: auto auto;
	}
	.goods-xiangqing .xiangqing-name::after {
	    display: block;
	    content: "";
	    width: 100px;
	    height: 1px;
	    background-color: #efefef;
	    position: absolute;
	    right: -110px;
	    top: 0;
	    bottom: 0;
	    margin: auto auto;
	}
	.content {
	    width: 100%;
	    height: auto;
	    margin: 20px 0;
	    padding: 0 20px;
	}
	.content .html-content {
	    width: 100%;
	    height: auto;
	}
	.daojishi{
	    width: 100%;
	    height: 44px;
	    line-height: 44px;
	    color: #fff;
	    text-align: center;
	    background-color: #d76f6c;
	    position: fixed;
	    left: 0;
	    bottom: 0;
	}
	.goumai {
	    width: 100%;
	    height: 44px;
	    line-height: 44px;
	    color: #fff;
	    text-align: center;
	    background-color: #67a605;
	    position: fixed;
	    left: 0;
	    bottom: 0;
	}
</style>